<template>
    <div class="body">
      <van-nav-bar
  :title="film.name"
  left-arrow
  @click-left="onClickLeft"
  fixed
  placeholder
  safe-area-inset-top
/>
      <van-image
        :src="film.poster"
        fit="cover"
        class="poster"
      />
      <div class="detial_film" v-if="JSON.stringify(film) !== '{}'">
        <div class="dl_tittle" >
          <div class="name">{{film.name}}<span class="filmType">{{film.item.name}}</span></div>
        <div class="grade" v-if="film.grade">{{film.grade}} <span> 分</span></div>
        </div>
        <div class="category">{{film.category}}</div>
        <div class="premiereAt">{{OPenTime(film.premiereAt)}}上映</div>
        <div class="nation">{{film.nation}}丨<span class="runtime">{{film.runtime}}分钟</span></div>
      </div>
       <van-collapse v-model="activeNames" :border="false">
        <van-collapse-item title="简介" name="1" class="synopsis">{{film.synopsis}}</van-collapse-item>
        </van-collapse>
      <div class="actors">
        <div class="a_title">演职人员</div>
      <swiper
        :slides-per-view="4"
        :space-between="10"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
        tag="div"
        class="a_swiper"
      >
        <swiper-slide v-for="item in film.actors" :key="item">
          <div class="actor">
          <img :src="item.avatarAddress"  >
          <p>{{item.name}}</p>
          <p>{{item.role}}</p>
          </div>
        </swiper-slide>
      </swiper>
      </div>
      <div class="photos">
        <div class="p_title">剧照</div>
      <swiper
        :slides-per-view="2"
        :space-between="10"
        tag="div"
        class="p_swiper"
      >
        <swiper-slide v-for="item in film.photos" :key="item">
          <div class="photo">
          <img :src="item"  >
          </div>
        </swiper-slide>
      </swiper>
      </div>
      <van-button type="primary" color="#ff5f16" block class="btn" @click="hamdleOnClick">选座购票</van-button>
       </div>
</template>

<script>
// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue'
import axios from 'axios'

// Import Swiper styles
import 'swiper/swiper.scss'
export default {
  props: ['id'],
  components: {
    Swiper,
    SwiperSlide
  },
  data () {
    return {
      film: {},
      activeNames: []
    }
  },
  methods: {
    onClickLeft () {
      this.$store.commit('ToggleTabbarShow', true)
      this.$router.push(`${this.$route.params.location ? this.$route.params.location : '/'}`)
    },
    hamdleOnClick () {
      this.$router.push('/cinemas')
      this.$store.commit('ToggleTabbarShow', true)
    }
  },
  mounted () {
    axios({
      url: `https://m.maizuo.com/gateway?filmId=${this.$route.params.id}&k=9929488`,
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16151016671203561505488897","bc":"310100"}',
        'X-Host': 'mall.film-ticket.film.info'
      }
    }).then(res => {
      this.film = res.data.data.film
    })
  },
  computed: {
    OPenTime () {
      return data => {
        var date = new Date((data * 1000))
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        y = y >= 10 ? y : '0' + y
        d = d >= 10 ? d : '0' + d
        return y + '-' + m + '-' + d
      }
    }
  },
  beforeMount () {
    this.$store.commit('ToggleTabbarShow', false)
  },
  beforeUnmountn () {
    this.$store.commit('ToggleTabbarShow', true)
  }
}
</script>
<style lang="scss" scoped>
.body{
  width: 100%;
  height: 100%;
  background-color: rgba(238, 238, 238, 0.63);
  padding-bottom: 50px;
}
.btn{
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
}
.poster{
  width: 100%;
  height: 210px;
}
.detial_film{
  background-color: #fff;
  font-size: 13px;
  color: #666;
  padding: 10px 15px 0 15px;
  .dl_tittle{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .name{
      font-size: 18px;
       display: flex;
       color: #333;
       align-items: center;
      .filmType{
        font-size: 12px;
        padding: 1px 2px;
        color: white;
        background-color: #ccc;
        border-radius: 3px;
        margin: 0;
        margin-left: 5px;
      }
    }
    .grade{
      font-size: 18px;
      font-style: italic;
      color: #ff4e32;
      span{
        font-style: normal;
        font-size: 12px;
      }
    }
  }
  .category{
    letter-spacing: 2px;
  }
  :nth-child(n){
    padding-bottom: 5px;
  }
}
.actors{
  margin-top: 10px;
  background-color: #fff;
  .a_title{
    padding: 15px;
  }
.a_swiper{
  width: 100%;
  height: 165px;
  box-sizing: border-box;
  padding-left: 15px;
  .actor{
    width: 100%;
    height: 100%;
    font-size: 12px;
    text-align: center;
  img{
    width: 100%;
    height: 65%;
  }
  }
}

}
.photos{
  margin-top: 10px;
  background-color: #fff;
  .p_title{
    padding: 15px;
  }
.p_swiper{
  width: 100%;
  height: 105px;
  box-sizing: border-box;
  padding-left: 15px;
  .photo{
    width: 100%;
    height: 100%;
    font-size: 12px;
    text-align: center;
  img{
    width: 100%;
    height: 100%;
  }
  }
}
}
</style>
